<template>
  <n-modal
    v-model:show="progressModal.show"
    preset="dialog"
    class="rounded-[24px]"
    title=""
    style="width: 600px"
    :show-icon="false"
    :mask-closable="false"
    :close-on-esc="false"
    :closable="false"
  >
    <div>
      <div v-if="progressModal.error" class="p-5">
        <div class="flex"  >         
    
        </div>
        <div></div>
        <div class="mt-4 text-center text-[20px] font-[300]">
          {{ progressModal.message }}
        </div>

        <div class="flex gap-10 mt-10" >
          <n-button class="flex-1" type="primary" round @click="progressModal.show=false">
            {{ $t("button.关闭") }}
          </n-button>
        </div>
      </div>

      <div v-else class="p-5">
        <div class="flex" v-if="progressModal.loading">
          <n-spin :size="60" class="m-auto"></n-spin>
        </div>
        <div></div>
        <div class="mt-4 text-center text-[20px] font-[300]">
          {{ progressModal.message }}
        </div>

        <div class="flex gap-10 mt-10" v-if="!progressModal.loading">
          <n-button class="flex-1" type="primary" round @click="goDetail">
            {{ $t("button.我已付款") }}
          </n-button>
          <n-button class="flex-1" type="primary" round ghost @click="goDetail">
            {{ $t("common.查看订单详情") }}
          </n-button>
        </div>
      </div>
    </div>
  </n-modal>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { createPayOrder, createSecondPayOrder } from "@/api/order";
const router = useRouter();
const route = useRoute();
const progressModal = defineModel("progressModal");
const payOrder = async (second) => {
  progressModal.value.loading = true;
  progressModal.value.message = window.tt("tips.跳转支付");
  const { data: paypalData } = second
    ? await createSecondPayOrder(progressModal.value.orderId)
    : await createPayOrder(progressModal.value.orderId);
  if (paypalData.data.status == "PAYER_ACTION_REQUIRED") {
    progressModal.value.message = window.tt("tips.等待支付");
    progressModal.value.loading = false;
    window.open(paypalData.data.links[1]?.href, "_blank");
  }
};

const goDetail = () => {
  if (route.name == "orderInfo") {
    location.reload();
  } else {
    router.push(`/orderInfo/${progressModal.value.orderId}`);
  }
};

defineExpose({ payOrder });
</script>

<style lang="scss" scoped></style>
